<template>
    <div>
        <el-form label-width="auto" style="max-width:600px">
            <el-form-item label="用户">
                <el-input v-model="account"></el-input>
            </el-form-item>
            <el-form-item label="密码">
                <el-input v-model="password" type="password"></el-input>
            </el-form-item>
            <el-form-item label="">
                <el-alert :title="tip" type="error" v-show="showTip"></el-alert>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="handleLogin">登录</el-button>
                <el-button @click="handleReset">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import { ref, watch } from 'vue';
import { ElMessageBox } from 'element-plus';

export default {
    name: 'Login',
    components: {},
    setup() {
        const account = ref('');
        const password = ref('');
        const tip = ref('');
        const showTip = ref(false);

        watch(password, (newValue, oldValue) => {
            console.log('新值：' + newValue + '旧值：' + oldValue);
            if (newValue.length < 6) {
                tip.value = '密码长度不能小于6';
                showTip.value = true;
            } else {
                tip.value = '';
                showTip.value = false;
            }
        });

        const handleLogin = () => {
            ElMessageBox.alert('登录成功', '提示', {
                confirmButtonText: '确定',
                type: 'success',
            });
        };

        const handleReset = () => {
            account.value = '';
            password.value = '';
            tip.value = '';
            showTip.value = false;
        };

        return {
            account,
            password,
            tip,
            showTip,
            handleLogin,
            handleReset,
        };
    },
};
</script>
